/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-22 16:19:19
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-04-07 10:40:18
 * @FilePath: \cxl-driving-training\src\views\column\list\index.ts
 */
import { BaseData, BaseMethod } from '@/utils/basc-data'
import { tableConfig } from './config'
import { reactive } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { formDataInterface, PropsFormpData } from '@/utils/interface'
import { listConfig } from './formConfig'
import {
    columnCreate,
    columnDisable,
    columnEdit,
    columnList,
    columnOperation,
    columnPageInterface
} from '@/apis/column'

export default class ColumnListData extends BaseData implements BaseMethod {
    dialog = reactive({
        visible: false,
        title: '新增栏目',
        width: '800px',
        type: 'create',
        id: ''
    })
    formData = reactive<PropsFormpData[]>([...listConfig])
    searchData = {
        name: ''
    }
    location = ['首页']
    type = ['视频', '图文', '图片']
    displayForm = ['轮播', '列表']
    constructor() {
        super(tableConfig)
        this.getData()
    }
    getData = (arg?: any) => {
        const params: columnPageInterface = {
            current: this.pageData.pagination.pageNo,
            size: this.pageData.pagination.pageSize
        }
        if (this.searchData.name) {
            params.name = this.searchData.name
        }
        columnList(params).then(res => {
            if (Number(res.data.code) === 200) {
                this.pageData.table.data.length = 0
                this.pageData.pagination.total = res.data.result.total
                const arr: any[] = res.data.result.records
                arr.forEach((element: any) => {
                    element.status = Number(element.disable) === 0 ? true : false
                    element.locationStr = this.location[element.location - 1]
                    element.typeStr = this.type[element.type - 1]
                    element.displayFormStr = this.displayForm[element.displayForm - 1] || ''
                    this.pageData.table.data.push(element)
                })
            }
        })
    }
    onSearch = (arg?: any) => {
        console.log(arg)
        this.searchData = arg
        this.getData()
    }
    onReset = (arg?: any) => {
        this.searchData = {
            name: ''
        }
        this.getData()
    }
    onPaginationChange = (arg?: any) => {
        this.pageData.pagination.pageNo = arg
        this.getData()
    }
    onPaginationSize = (arg?: any) => {
        this.pageData.pagination.pageNo = 1
        this.pageData.pagination.pageSize = arg
        this.getData()
    }
    onOperation = (arg?: any) => {
        const { type, data } = arg
        console.log(type, data)
        if (type === 'create') {
            this.dialog.visible = true
            this.dialog.type = type
            this.dialog.title = '新增栏目'
            // this.formData.forEach((child: formDataInterface[]) => {
            //     child.forEach((item: formDataInterface) => {
            //         item.value = ''
            //     })
            // })
        } else if (type === 'edit') {
            this.dialog.visible = true
            this.dialog.type = type
            this.dialog.title = '编辑栏目'
            this.dialog.id = data.id
            // this.formData.forEach((child: formDataInterface[]) => {
            //     child.forEach((item: formDataInterface) => {
            //         if (item.key === 'introduction') {
            //             item.value = data.introduction + ''
            //         } else if (item.key === 'location') {
            //             item.value = data.location + ''
            //         } else if (item.key === 'name') {
            //             item.value = data.name + ''
            //         } else if (item.key === 'sort') {
            //             item.value = data.sort + ''
            //         } else if (item.key === 'type') {
            //             item.value = data.type + ''
            //         } else if (item.key === 'displayForm') {
            //             item.value = data.displayForm + ''
            //         }
            //     })
            // })
        } else if (type === 'delete') {
            //
        } else if (type === 'switch') {
            columnDisable(data.status ? 0 : 1, data.id).then((res: any) => {
                if (Number(res.data.code) === 200) {
                    this.getData()
                    ElMessage.success('修改成功')
                }
            })
        }
    }
    //监听弹窗关闭
    onCloseDialog = () => {
        this.dialog.visible = false
    }
    //监听弹窗点击确定按钮
    submitForm = async (formEl: any) => {
        if (formEl?.validateForm()) {
            console.log(formEl)
            const data: columnOperation = {
                introduction: '',
                location: 1,
                name: '',
                sort: 1,
                type: 1,
                displayForm: 1
            }
            // this.formData.forEach((child: formDataInterface[]) => {
            //     child.forEach((item: formDataInterface) => {
            //         console.log(item)
            //         if (item.key === 'name') {
            //             data.name = item.value as string
            //         } else if (item.key === 'location') {
            //             data.location = item.value as number
            //         } else if (item.key === 'sort') {
            //             data.sort = item.value as number
            //         } else if (item.key === 'introduction') {
            //             data.introduction = item.value as string
            //         } else if (item.key === 'type') {
            //             data.type = item.value as number
            //         } else if (item.key === 'displayForm') {
            //             data.displayForm = item.value as number
            //         }
            //     })
            // })
            if (this.dialog.type === 'create') {
                columnCreate(data).then(res => {
                    if (Number(res.data.code) === 200) {
                        ElMessage.success('新增成功！')
                        this.dialog.visible = false
                        this.getData()
                    }
                })
            } else {
                data.id = this.dialog.id
                columnEdit(data).then(res => {
                    if (Number(res.data.code) === 200) {
                        ElMessage.success('修改成功！')
                        this.dialog.visible = false
                        this.getData()
                    }
                })
            }
        }
    }
}
